<script setup>
import { PlusOutlined, SearchOutlined, RedoOutlined, QuestionOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
const emits = defineEmits(['add', 'init', 'search'])

const schVal = ref('')
// 新增按钮点击
const add = () => {
  emits('add')
}
// 刷新
const init = () => {
  schVal.value = ''
  emits('init')
}
// 搜索
const search = () => {
  emits('search', { name: schVal.value ?? null })
}

const appRoles = ref([
  { label: '普通用户', details: '普通用户描述' },
  { label: '农机操作手', details: '农机操作手描述' },
  { label: '农机维修员', details: '农机维修员描述' },
  { label: '管理员', details: '管理员描述' },
  { label: '村级干部', details: '村级干部描述' },
  { label: '采购专员', details: '采购专员描述' },
])
</script>

<template>
  <div class="head">
    <div class="right">
      <AButton type="primary" @click="add">
        <PlusOutlined /> 新增
      </AButton>
      <a-popover placement="right">
        <template #content>
          <div v-for="(item, index ) of appRoles" :key="index">
            <span style="font-weight: bold;">{{ item.label }}：</span>{{ item.details }}
          </div>
        </template>
        <AButton>
          <QuestionOutlined />移动端角色描述
        </AButton>
      </a-popover>
    </div>
    <div class="right">
      <a-input @input="search" v-model:value="schVal" placeholder="请输入角色名称查询" class="com-ipt" allowClear>
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <AButton type="primary" @click="search">
        <SearchOutlined /> 搜索
      </AButton>
      <AButton type="primary" @click="init">
        <RedoOutlined /> 刷新
      </AButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head {
  display: flex;
  gap: 8px;
  justify-content: space-between;

  .right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}
</style>